import React, { Component } from 'react'
import userModel from "../services/userinfo/Service"
import menuModel from "../services/menu/Service"
import userMenuModel from "../services/usermenu/Service"

export default class AddUserMenu extends Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            userid: 0,
            userList: [],//放普通用户
            menuList: [],//放普通菜单
            usermenuList: [],//下拉框选择的用户的菜单
        }
    }
    async componentDidMount() {
        let { data: userList } = await userModel.query({ type: 2 });
        let { data: menuList } = await menuModel.query({ type: 2 });
        this.setState({
            userList, "menuList": menuList.map((item: any) => { //额外的补充字段
                item.checked = false;
                return item;
            })
        })
    }

    changeUser = async (userid: number) => {//下拉框改变的时候 给userid赋值
        if (userid) {
            let { data: usermenuList } = await userMenuModel.query({ userid });

            this.setState({
                userid,
                usermenuList,
                menuList: this.state.menuList.map((item: any) => {
                    //看这个item的id  在不在usermenuList的 menuid中
                    if (usermenuList.some((info: any) => info.menuid === item.id)) {
                        item.checked = true;
                    } else { 
                        item.checked = false;
                     }
                    return item;

                })
            })



        }



    }

    add = async () => {
        //要userid   要选择的菜单
        let checkedList = this.state.menuList.filter((item: any) => item.checked);
        let userid = this.state.userid;
        if (userid && checkedList.length) {
            //做删除
            let  idsList = [];
            if(this.state.usermenuList.length){//用户有的权限
                idsList = this.state.usermenuList.map((item:any)=>item.id);//编号的集合
            }

            for(let i=0;i<idsList.length;i++){
                let  id  = idsList[i];
                await  userMenuModel.del(id);
            }


            //把数据写入 usermenu
            //批量新增的时候用for循环
            for (let i = 0; i < checkedList.length; i++) {
                let menu = checkedList[i];//选择的每一个菜单
                let { id: menuid, path, msg, component } = menu;

                await userMenuModel.add({
                    userid, menuid, path, msg, component
                })
            }



            alert("分配成功");
        } else {
            alert("请选择用户和菜单");
        }



    }

    setCheckedOne = (id: any, flag: any) => {

        this.setState({
            menuList: this.state.menuList.map((item: any) => {
                if (item.id === id) {
                    item.checked = flag;
                }
                return item;
            })
        })

    }


    render() {
        return (
            <div>AddUserMenu
                <hr></hr>
                <div>
                    <select onChange={(e) => {
                        this.changeUser(Number(e.target.value));

                    }}>
                        <option value="">请选择用户</option>
                        {this.state.userList.map((item: any) => {
                            return (<option value={item.id} key={item.id}>{item.username}</option>)
                        })}
                    </select>
                </div>
                <div className='user'>
                    <div className='table'>
                        <div className='tr'>
                            <div className='td'>选择</div>
                            <div className='td'>菜单名称</div>
                            <div className='td'>路径</div>
                            <div className='td'>组件</div>
                        </div>

                        {this.state.menuList.map((item: any) => {
                            return <div className='tr' key={item.id}>
                                <div className='td'>
                                    <input type="checkbox" checked={item.checked} onChange={(e) => {
                                        this.setCheckedOne(item.id, e.target.checked);

                                    }} />
                                </div>
                                <div className='td'>{item.msg}</div>
                                <div className='td'>{item.path}</div>
                                <div className='td'>{item.component}</div>
                            </div>

                        })}
                    </div>
                </div>
                <div>
                    <button onClick={() => {
                        this.add();
                    }}>确定权限分配</button></div>


            </div>
        )
    }
}
